<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>cruddemo</title>
    <link rel="stylesheet" href="../lib/element-plus/theme-chalk/index.css">
    <style>
        .container {
            width: 960px;
            margin-left: auto;
            margin-right: auto;
        }

        .el-col{
             padding: 10px;
             padding-top:20px ;
        }
    </style>
</head>
<body>
<div id="app" class="container">

    <el-row>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item><a href="/">仓库管理</a></el-breadcrumb-item>
            <el-breadcrumb-item>商品信息</el-breadcrumb-item>

        </el-breadcrumb>
    </el-row>
    <el-row>
        <el-form>
            <el-row>
                <el-col span="8">
                     <el-form-item label="商品名称">
                          <el-input></el-input>
                     </el-form-item>
                </el-col>
                <el-col span="8">
                    <el-form-item label="商品价格">
                        <el-input></el-input>
                    </el-form-item>
                </el-col> <el-col span="8">
                <el-form-item>
                    <el-button type="primary">搜索</el-button>
                </el-form-item>
            </el-col>

            </el-row>

        </el-form>

    </el-row>
    <el-row>
        <el-button-group>
            <el-button type="success" @click="info.isVisible=true">添加</el-button>
            <el-button type="primary">打印</el-button>
        </el-button-group>
    </el-row>
    <el-row>

        <el-table :data="products">
            <el-table-column type="selection"></el-table-column>
            <el-table-column prop="name" label="商品名称"></el-table-column>
            <el-table-column prop="price" label="商品价格"></el-table-column>
            <el-table-column label="操作">
                <template v-slot:default="scope">
                    <el-button type="warning" @click="btnEditClick(scope.row)">修改</el-button>
                    <el-button type="danger" @click="btnRemoveClick(scope.row.productId)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-row>


     <el-dialog v-model="info.isVisible">

            <el-form label-width="120">

                 <el-form-item label="商品名称">
                       <el-input v-model="info.data.name"></el-input>
                 </el-form-item>

                <el-form-item label="商品价格">
                    <el-input v-model="info.data.price"></el-input>
                </el-form-item>

                <el-form-item >
                     <el-button type="success" @click="btnSubmitClick">确定</el-button>
                </el-form-item>

            </el-form>


     </el-dialog>

</div>

</body>
<script src="../lib/vue.global.js"></script>
<script src="../lib/axios.js"></script>
<script src="../lib/element-plus/dist/index.full.js"></script>
<script>

    const app = {
        data() {
            return {
                products: [],
                info:{
                     isVisible:false,
                     data:{
                          productId:-1,
                          name:'',
                          price:0
                     }
                }
            }
        }, mounted() {

              this.initTable();

        },
        methods:{
             btnSubmitClick(){

                  axios({
                      url:'http://localhost:8080/pro/edit',
                      method:'post',
                      params:this.info.data,
                      dataType:'json'
                  }).then((res)=>{

                        if(res.data.success){
                             this.initTable();
                             this.info.isVisible = false;
                        }
                  })
             },
            btnEditClick(row){
                  this.info.isVisible = true;

                  this.info.data = {
                      productId:row.productId,
                      name:row.name,
                      price:row.price
                  }
            },btnRemoveClick(productId){

                  if(confirm('是否删除当前数据')){

                      axios({
                           url:'http://localhost:8080/pro/remove',
                           method:'post',
                          dataType:'json',
                          params:{
                                 productId:productId
                           }
                      }).then((res)=>{
                            if(res.data.success){
                                 alert("删除成功！");
                                 this.initTable();
                            }else {
                                 alert("服务端异常，删除失败！")
                            }
                      })
                  }
            }
            ,initTable(){
            axios({
                url: 'http://localhost:8080/pro/list',
                method: 'get',
                dataType: 'json'
            }).then((res) => {
                console.log(res.data);
                this.products = res.data;
            })
        }
        }
    }


    Vue.createApp(app)
        .use(ElementPlus)
        .mount('#app')
</script>

</html>